<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html PUBLIC "-//W3C//Ddiv HTML 4.01 divansitional//EN" "http://www.w3.org/div/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-81">
  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  <link href="${ctx.resource}/css/goals.css" rel="stylesheet">
  <title>成果页</title>
</head>
<body>
  <div class="page-group">
    <div class="page page-current">
      <header class="bar bar-nav fs-header-small">
        <a href="${ctx.host}/rounds/${courseRoundId}/courseware/home" class="icon icon-left pull-left"></a>
        <h1 class="title" style="font-weight: bold;">${weeks}周成果报告</h1>
      </header>
      
      <div class="content">
        <div class="content-block no-margin text-center" style="padding: .25rem .75rem; background: #ffde00;">
          <img src="${ctx.resource}/image/course/medal.png" style="display: block; margin: 0 auto; width: 2.5rem;">
          <p style="margin: .25rem 0 0; font-size: .7rem;">以下是您在人马君所获得的成果</p>
        </div>
        
        <div class="content-block basic-table" style="padding: 0; margin: 0">
          <div class="basic-item flex-box basic-header">
            <div class="item flex-shrink"></div>
            <div class="item">体重(KG)</div>
            <div class="item">体脂率(%)</div>
            <div class="item">胸围(CM)</div>
            <div class="item">腰围(CM)</div>
            <div class="item">臀围(CM)</div>
          </div>
          <c:forEach begin="0" end="${weeks}" var="i">
            <c:set var="week" value="${i}${''}"></c:set>
            <div class="basic-item flex-box">
              <div class="flex-shrink">
                <c:choose>
                  <c:when test="${i eq 0}">入营前</c:when>
                  <c:otherwise>第${i}周</c:otherwise>
                </c:choose>
              </div>
              <div class="item"><span class="big-size"><fmt:formatNumber value='${bwhRecords[week].weight}' minFractionDigits='0' maxFractionDigits='2'></fmt:formatNumber></span></div>
              <div class="item"><span class="big-size"><fmt:formatNumber value='${bwhRecords[week].bodyFatRate}' minFractionDigits='0' maxFractionDigits='2'></fmt:formatNumber></span></div>
              <div class="item"><span class="big-size"><fmt:formatNumber value='${bwhRecords[week].bust}' minFractionDigits='0' maxFractionDigits='2'></fmt:formatNumber></span></div>
              <div class="item"><span class="big-size"><fmt:formatNumber value='${bwhRecords[week].waist}' minFractionDigits='0' maxFractionDigits='2'></fmt:formatNumber></span></div>
              <div class="item"><span class="big-size"><fmt:formatNumber value='${bwhRecords[week].hips}' minFractionDigits='0' maxFractionDigits='2'></fmt:formatNumber></span></div>
            </div>
          </c:forEach>
        </div>
        
        <div class="basic-title text-center" style="padding: .5rem 0;font-size: 1.2rem;background: #ffde00;">${weeks}周的改变如下</div>
        <table class="change-table">
          <tbody>
            <tr>
              <td rowspan="3" class="change-table-left" style="background: #eeeeee;">基础力量</td>
              <td>静蹲</td>
              <td>${basicData.staticSquat.staticSquat}</td>
              <td>${resultReport.staticSquat.staticSquat}</td>
              <td rowspan="3" class="change-table-right" style="background: #eeeeee;"><strong>后续计划</strong><br>${resultReport.basicForcePlan}</td>
            </tr>
            <tr>
              <td>俯卧撑(30s)</td>
              <td>${basicData.pushUp.pushUp}</td>
              <td>${resultReport.pushUp.pushUp}</td>
            </tr>
            <tr>
              <td>两头起(30s)</td>
              <td>${basicData.vUp.vUp}</td>
              <td>${resultReport.vUp.vUp}</td>
            </tr>
          </tbody>
        </table>
        
        <table class="change-table">
          <tbody>
            <tr>
              <td class="change-table-left" rowspan="2" style="background: #fff190;">心脏测试</td>
              <td>1分钟波比跳</td>
              <td>${empty basicData.standardBobi ? '' : (basicData.standardBobi ? '标准，' : '简化，')}${basicData.bobi}${empty basicData.bobi ? '' : '个'}</td>
              <td>${empty resultReport.standardBobi ? '' : (resultReport.standardBobi ? '标准，' : '简化，')}${resultReport.bobi}${empty resultReport.bobi ? '' : '个'}</td>
              <td rowspan="2" class="change-table-right" style="background: #eeeeee;" ><strong>后续计划</strong><br/>${resultReport.heartLungPlan}</a>
              </td>
            </tr>
            <tr>
              <td>其他</td>
              <td class="change-table-right"></td>
              <td class="change-table-right">${resultReport.heartLungRemark}</td>
            </tr>
          </tbody>
        </table>
        
        <table class="change-table">
          <tbody>
            <tr>
              <td class="change-table-left" style="background: #eeeeee;">其他</td>
              <td></td>
              <td class="change-table-right">${basicData.remark}</td>
              <td class="change-table-right">${resultReport.remark}</td>
              <td class="change-table-right" style="background: #eeeeee;"><strong>后续计划</strong><br/>${resultReport.otherPlan}</td>
            </tr>
          </tbody>
        </table>
        
        <div class="basic-title text-center" style="padding: .5rem 0;font-size: 1.2rem;background: #ffde00;">对本周期的总结<span class="pull-right"><a href="${ctx.host}/rounds/${courseRoundId}/result-report/edit-summary" style="position: absolute; right: .75rem; font-size: .75rem;">编辑</a></span></div>
        <form>
          <div class="row no-gutter summary-grid">
            <div class="col-50 summary-item">
              <p class="summary-title">学员</p>
              <div class="description">
                <p>${resultReport.studentSummary}</p>
              </div>
            </div>
            <div class="col-50 summary-item">
              <p class="summary-title">教练</p>
              <div class="description">
                <p>${resultReport.coachSummary}</p>
              </div>
            </div>
            <div class="col-50 summary-item">
              <p class="summary-title">对教练想说的话</p>
              <div class="description">
                <p>${resultReport.wordsToCoach}</p>
              </div>
            </div>
            <div class="col-50 summary-item">
              <p class="summary-title">教练想对您说的话</p>
              <div class="description">
                <p>${resultReport.wordsToStudent}</p>
              </div>
            </div>
          </div>
        </form>
        
        <c:if test="${not empty resultReport.previousPicture || not empty resultReport.latterPicture}">
          <div class="basic-title text-center" style="padding: .5rem 0;font-size: 1.2rem;background: #ffde00;">对比照</div>
          <div class="row no-gutter summary-grid" style="overflow: auto; display: -webkit-box; display: flex;">
            <div class="col-50 summary-item" style="height: auto; display: flex; display: -webkit-box; align-items: center;">
              <p class="summary-title" style="position: absolute; left: 0; right: 0; top: .5rem;">入营时</p>
              <div style="margin-top: 1.5rem;  display: -webkit-box; display: flex; align-items: center; justify-content: center;-webkit-box-pack: center;">
                <c:if test="${not empty resultReport.previousPicture}">
                  <img alt="入营时照片" src="${cloud.prod}/${resultReport.previousPicture}" width="100%" height="auto">
                </c:if>
              </div>
            </div>
            <div class="col-50 summary-item" style="height: auto; display: flex; display: -webkit-box; align-items: center;">
              <p class="summary-title" style="position: absolute; left: 0; right: 0; top: .5rem;">结营时</p>
              <div style="margin-top: 1.5rem;  display: -webkit-box; display: flex; align-items: center; justify-content: center;-webkit-box-pack: center;">
                <c:if test="${not empty resultReport.latterPicture}">
                  <img alt="结营时照片" src="${cloud.prod}/${resultReport.latterPicture}" width="100%" height="auto">
                </c:if>
              </div>
            </div>
          </div>
        </c:if>
      </div>
    </div>
  </div>
  
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/course/result.js" />
  <script type="text/javascript">
    require(['page/course/result'], function(page) {
      page.init()
    })
  </script>
</body>
</html>
